import Vue from 'vue'
// import VueRouter from 'vue-router'
import VueRouter from '@/my-router'
import About from '../views/About.vue'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    children: [
      {
        path: 'a',
        component: {
          render: h => <h1>a</h1>
        }
      },
      {
        path: 'b',
        component: {
          render: h => <h1>b</h1>
        }
      }
    ]
  },
  {
    path: '/about',
    name: 'About',
    component: About,
    children: [
      {
        path: 'a',
        component: {
          render: h => <span>a</span>,
        }
      },
      {
        path: 'b',
        component: {
          render: h => <span>b</span>,
        }
      },
    ]
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

// 动态添加多个 单个路由
router.matcher.addRouters([
  {
    path: '/about',
    name: 'About',
    component: About,
    children: [
      {
        path: 'c',
        component: {
          render: h => <span>c</span>,
        }
      },
    ]
  }
])

router.matcher.addRouter(
  {
    path: '/about',
    name: 'About',
    component: About,
    children: [
      {
        path: 'd',
        component: {
          render: h => <span>c</span>,
        }
      },
    ]
  }
)




// 导航守卫， 路由之间相互切换时调用的狗子
//------------------
// 路由即将跳转走    beforeRouteUpdate
// 新跳转的路由    beforeEach
// 路由更新    beforeRouteUpdate
// 路由变化但不是更新  beforeEnter
// 走路由     beforeRouteEnter
//  确认切换完毕     beforeResolve
//  切换完毕    afterEach


router.beforeEach((form, to, next) => { // 类似express 中间件
  setTimeout(() => {
    console.log(1)
    next()
  }, 0)
})

router.beforeEach((form, to, next) => {
  setTimeout(() => {
    console.log(2)
    next()
  }, 0)
})


export default router
